<template>
  <div class="SelectSeat">
    <van-nav-bar :title="MovieName" left-arrow @click-left="onClickLeft" />
    <div>
      <div class="seatType">
        <div class="tehui">
          <img
            src="http://p0.meituan.net/moviemachine/903ea73657465071afc936a1129765c3584.png"
            width="20px"
            alt
          />
          <span>普通座</span>
        </div>
        <div class="putong">
          <img
            src="http://p0.meituan.net/moviemachine/ee63042a599840b3a660e28330ad1bda1116.png"
            width="20px"
            alt
          />
          <span>不可用</span>
        </div>
        <div class="on">
          <img
            src="http://p0.meituan.net/moviemachine/2976af246e5fab4f72c52fac9f20ba521398.png"
            width="20px"
            alt
          />
          <span>已售</span>
        </div>
      </div>
      <div class="center">
        <div class="box">中央屏幕</div>
      </div>
      <div class="seat">
        <div class="row" v-for="(item,index) in seatData.rows" :key="index">
          <div
            class="item"
            v-for="(e,i) in item.seats"
            :key="i"
            @touchend.stop="ClickSeat(e.seatStatus,index,i)"
          >
            <img
              :src="e.seatStatus==1?'http://p0.meituan.net/moviemachine/2976af246e5fab4f72c52fac9f20ba521398.png':(e.seatStatus==4? 'http://p0.meituan.net/moviemachine/903ea73657465071afc936a1129765c3584.png':(e.seatStatus==3?'http://p0.meituan.net/moviemachine/80c67d1a9af433466453c69d29f32888742.png':'http://p0.meituan.net/moviemachine/ee63042a599840b3a660e28330ad1bda1116.png'))"
              width="30px"
              ref="img"
            />
          </div>
        </div>
      </div>
      <div class="Select">
        <van-notice-bar left-icon="volume-o" text="观影需全程佩戴口罩,电影放映期间影厅内禁止饮食,感谢配合!" />
        <p>已选座位</p>
        <div class="Select-list" ref="Selectlist">
          <div class="select-item" v-for="(e,i4) in SelectlistData" :key="i4">
            <p>{{e.seatRow}}排{{e.seatL}}座</p>
            <p>{{e.price}}元</p>
            <span class="cl" @touchend="ReList(i4)">X</span>
          </div>
        </div>
        <div class="Confirm-selection">
          <button class="btn">
            <span v-if="sum">{{sum}}￥</span> 确认选座
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "SelectSeat",
  data() {
    return {
      MovieName: "",
      seatData: [],
      SelectlistData: [],
      price: 0,
      count: 0,
      sum: 0
    };
  },

  mounted() {
    this.MovieName = this.$route.params.MovieName;
    this.price = this.$route.params.price;
  },
  created() {
    this.GetSeatData();
  },
  methods: {
    onClickLeft() {
      history.back();
    },
    GetSeatData() {
      this.axios({
        method: "get",
        url: "cinema/seat.json"
      }).then(ref => {
        this.seatData = ref.data.data.seat.regions[0];
        });
    },
    ClickSeat(seatStatus, index, i) {
      if (seatStatus == 4) {
        this.seatData.rows[index].seats[i].seatStatus = 3;
        this.SelectlistData.push({
          seatRow: parseInt(index + 1),
          seatL: parseInt(i + 1),
          price: this.price
        });
        this.count += 1;
        this.sum = this.count * this.price;
        this.sum = (this.count * this.price).toFixed(2);
      }
    },
    ReList(i) {
      this.seatData.rows[this.SelectlistData[i].seatRow - 1].seats[
        this.SelectlistData[i].seatL - 1
      ].seatStatus = 4;
      this.SelectlistData.splice(i, 1);
      this.count -= 1;
      this.sum = (this.count * this.price).toFixed(2);
    }
  }
};
</script>
<style lang="less" scoped>
/deep/.van-nav-bar__content {
  background-color: #e4393c;
  .van-icon {
    color: #eee;
  }
  .van-nav-bar__title {
    color: #eee;
  }
}
.seatType {
  display: flex;
  padding: 10px 10px;
  span {
    margin-left: 6px;
  }
  .tehui {
    margin-right: 20px;
    display: flex;
    align-items: center;
  }
  .putong {
    margin-right: 20px;
    display: flex;
    align-items: center;
  }
  .on {
    display: flex;
    align-items: center;
  }
}
.center {
  position: relative;
  margin-top: 20px;
  .box {
    position: absolute;
    top: 0;
    left: 30px;
    text-align: center;
    width: 300px;
    height: 0px;
    border-top: 15px solid red;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
  }
}
.seat {
  margin: 50px;
  .row {
    display: flex;
    justify-content: center;
    .item {
      margin: 5px 5px;
    }
  }
}
.Select {
  p {
    margin-left: 10px;
    font-size: 16px;
  }
  .Select-list {
    border-radius: 5px;
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-wrap: wrap;
    .select-item {
      position: relative;
      padding: 0px 10px;
      width: 20%;
      margin: 10px;
      border: 1px #eee solid;
      border-radius: 5px;
      background-color: rgb(255, 255, 255);
      p {
        font-size: 12px;
      }
      .cl {
        position: absolute;
        right: 0;
        top: 0;
        font-size: 10px;
        color: rgba(0, 0, 0, 0.877);
      }
    }
  }
}
.Confirm-selection {
  margin: 20px;
  text-align: center;
  .btn {
    font-size: 18px;
    border-radius: 5px;
    border: none;
    color: #eee;
    background-color: rgb(255, 154, 0);
    height: 40px;
    width: 300px;
  }
}
</style>